<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>总价格： {{totalPrice}}</h2>
    <h2>总价格： {{totalPrice}}</h2>
    <h2>总价格： {{totalPrice}}</h2>

    <h2>总价格： {{getTotalPrice()}}</h2>
    <h2>总价格： {{getTotalPrice()}}</h2>
    <h2>总价格： {{getTotalPrice()}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            books: [
                {id: 1, name: "a", price: 1},
                {id: 2, name: "b", price: 2},
                {id: 3, name: "c", price: 3},
                {id: 4, name: "d", price: 4},
                {id: 5, name: "e", price: 5},
            ]
        },
        computed: {
            totalPrice: function () {
                console.log('ccc');
                let totalPrice = 0;
                for (let book of this.books) {
                    totalPrice += book.price;
                }
                return totalPrice;
            }
        },
        methods: {
            getTotalPrice: function () {
                console.log('mmm');
                let totalPrice = 0;
                for (let book of this.books) {
                    totalPrice += book.price;
                }
                return totalPrice;
            }
        },
    })
</script>

</body>
</html>